<template>
  <div>
    <div id="header">
      <img src="../assets/logo.png" alt="" class="logo">
      <div class="slogen">
        <h5>狗眼电影</h5>
        <p>查影讯，上狗眼电影就够了！</p>
      </div>
      <button class="search" v-on:click='gotosearch()'>请输入电影名</button>
    </div>
    <loading v-if='loading'></loading>
    <div id="nav" v-if='!loading'>
      <ul>
        <li><a href="">正在热映</a></li><li><a href="">即将上映</a></li>
      </ul>
    </div>
   <ul id="move_list" v-if='!loading'>
     <li class="list_item" v-for="movie in movieList" v-on:click='gotoDetail(movie.id)'>
       <div class="item_left"><img v-bind:src="movie.images.small" alt=""></div>
       <div class="item_right">
         <h2> {{movie.title}}</h2>
         <star v-bind:num="movie.rating.stars"></star>
         <p class="score">{{movie.rating.average}}分</p>
         <p class="director">导演:{{movie.directors[0].name}}</p>
         <p class="actor">
           主演:
           <span v-for="actor in movie.casts">{{actor.name}}</span>
         </p>
       </div>
     </li>
   </ul>
  </div>  
</template>

<script>
import star from './star';
import loading from './loading'

export default {
  name: 'movieList',
  data () {
    return {
      loading:true,
      movieList:[]

    }
  },
  components:{
    star:star,
    loading:loading
  },
  mounted(){
    this.$http.jsonp("https://api.douban.com/v2/movie/in_theaters?apikey=0b2bdeda43b5688921839c8ecb20399b").then(function(response){
        
        this.movieList=response.body.subjects;
        this.loading=false
    }) 
  },
  methods:{
    gotoDetail:function(id){
      this.$router.push({ name: 'MovieDetail', params: {id:id}})
    },
    gotosearch:function(){
      this.$router.push({path:'/search/'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #header{
    height: 60px;
    padding: 10px 20px;
    background: #e5e9f2;
    box-sizing: border-box;
  }
  .logo{
    float: left;
    width: 42px;
    margin-right: 15px;
  }
  .slogen{
    float: left;
  }
  .slogen h5{
    font-size: 17px;
    font-weight: 700;
    color: #333;
  }
  .slogen p{
    font-size: 12px;
    color: #999;
    line-height: 30px;
  }
  button.search{
    background: #fff;
    border: 0px;
    height: 40px;
    float: right;
    border-radius: 15px;
    padding-left: 10px;
    font-size: 12px;
    width: 110px;
  }
  #nav{
    background: #df2d2d;
  }
  #nav li{
    display: inline-block;
    text-align: center;
    width: 50%;
  }
  #nav li a{
    text-decoration: none;
    line-height: 35px;
    color: #f9fafc;
    font-size: 20px;
  }
  .list_item{
    margin: 0 20px;
    padding: 10px 0;
    border-bottom: 1px solid #d6d6d6;
    display: flex;
    align-items: flex-end;
  }
  .list_item .item_left{
    float: left;
    margin-right: 20px;
  }
  .item_right{
    font-size: 14px;
    color: #666;
    line-height: 20px;
  }
  .item_right h2{
    font-size: 20px;
    margin-bottom: 20px;
  }
.star-item{
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: 10px 10px;
    background-repeat: no-repeat;

  }
  .star-item.on{ 
    background-image: url("../assets/star_on.png");
  }
  .actor span{
    margin-right:5px;
  }
</style>
